<template>
    <div>
        <el-table class="goods-list" max-height="550" :data="goodsTable" border>
            <el-table-column label="序号" width="50">
                <template slot-scope="scope"><div style="text-align: center">{{scope.$index + 1}}</div></template>
            </el-table-column>
            <el-table-column label="图片" type="index" width="100">
              <template slot-scope="scope">
                <img style="display:block;width:50px;height:50px;"
                     :src="scope.row.thumbUrl + `?x-oss-process=image/resize,w_200`"
                     alt="" v-show="scope.row.thumbUrl">
              </template>
            </el-table-column>
            <el-table-column label="商品名称" prop="goodsName" align="center" min-width="300px">
                <template slot-scope="scope">
                    <el-select
                        clearable
                        filterable
                        default-first-option
                        style="width: 72%;"
                        :disabled="disabled"
                        v-model="scope.row.goodsName"
                        remote :remote-method="searchGoodsByName(scope.row)"
                        :loading="scope.row.loading"
                        @change="onGoodsSelectChange($event, scope.row,1)"
                        placeholder="输入名称查询">
                        <el-option v-for="item in scope.row.goodsList" :key="item.id" :label="item.goodsName" :value="item.id">
                        </el-option>
                    </el-select>
                    <el-button type="text" :disabled="disabled" @click="showGoodsDialog(scope.row.goodsNum, scope.$index)">
                        所有商品
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column label="规格" prop="modelName" align="center" min-width="200px">
                <template slot-scope="scope">
                    <el-select v-model="scope.row.goodsId" @change="onModelSelectChange($event, scope.row)" placeholder="请选择">
                        <el-option
                            v-for="item in scope.row.goodsModelList"
                            :key="item.id"
                            :label="item.modelName+' /单位:'+item.modelUnit"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column v-if="[1, 2].includes(type)" label="订货价" prop="buyPrice" align="center" width="260">
                <template slot-scope="scope">
                <el-input-number :disabled="[1].includes(type)" v-model="scope.row.buyPrice" :min="0" :max="20000" label="价格" @change="countPrice"></el-input-number>
                </template>
            </el-table-column>
            <el-table-column label="数量" prop="goodsNum" align="center" width="260">
                <template slot-scope="scope">
                <el-input-number v-model="scope.row.goodsNum" :min="1" :max="20000" label="数量" @change="countPrice"></el-input-number>
                </template>
            </el-table-column>
            <el-table-column label="小计金额" align="center">
                <template slot-scope="scope">
                    <span v-if="[3].includes(type)">0</span>
                    <span v-else>{{scope.row.goodsNum * scope.row.buyPrice}}</span>
                </template>
            </el-table-column>
            <el-table-column label="备注" prop="remarks" align="center" width="300">
                <template slot-scope="scope">
                <el-input type="textarea" v-model="scope.row.remarks" maxlength="10"></el-input>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="120" align="center">
                <template slot-scope="scope">
                    <el-button
                        type="danger" plain
                        icon="el-icon-delete"
                        @click="delGoods(scope.row, scope.$index, 1)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="选择商品" :visible.sync="dialogVisible">
            <goods-list @select="onSelectGoods"></goods-list>
        </el-dialog>
    </div>
</template>

<script>
import goodsList from './goodsList.vue';
import Request from './../../request.js';
import { async } from 'q';
export default {
    props: {
        type: {
            type: Number,
        },
        goodsTable: {
            type: Array,
        },
        disabled: {
            type: Boolean,
        }
    },
    components: {
        goodsList,
    },
    data() {
        return {
            request: new Request(),
            dialogVisible: false,
            selectedRowIndex: -1,
            goodsNum: 1,
        }
    },
    methods: {
        delGoods(e, index, type) {
            this.goodsTable.splice(index, 1);
            this.countPrice();
        },
        onModelSelectChange(e, row) {
            let selectedModel = row.goodsModelList.filter(item => item.id === e)[0]
            this.$set(row, 'goodsId', selectedModel.id)
            this.$set(row, 'purchasePrice', selectedModel.purchasePrice || selectedModel.modelPrice)
            this.$set(row, 'goodsImg', selectedModel.modelUrl)
            this.$set(row, 'goodsModel', selectedModel.modelName)
            this.$set(row, 'unit', selectedModel.modelUnit)
            this.$set(row, 'buyPrice', getPrice(e, row.goodsModelList))
            this.countPrice();
        },
        showGoodsDialog(goodsNum, index) {
            this.dialogVisible = true;
            this.selectedRowIndex = index;
            this.goodsNum = goodsNum;
            this.gift = 0;
        },
        countPrice(){
            this.$emit('change', this.goodsTable, this.type);
        },
        /**
         * 页面请求
         */
        async getGoodsList(params) {
            params.pageSize = 20;
            let res = await this.request.getGoodsList(params);
            if(res.code === 200) return res.ext.list;
            this.$message.warning('商品列表获取错误', res.msg);
            return [];
        },
        /**
         * 页面方法
         */
        searchGoodsByName(row) {
            // 将row信息传入
            let _this = this;
            return async function (searchValue) {
                if (searchValue !== '') {
                    row.loading = true
                    let params = {
                        goodsName: searchValue,
                    }
                    let res = await _this.getGoodsList({goodsName: searchValue});
                    _this.$set(row, 'goodsList', res);
                    _this.$set(row, 'loading', false)
                }
            }
        },
        onGoodsSelectChange(e, row,type) {
            if(e){
                let selectedGoods = row.goodsList.filter(item => item.id === e)[0]
                row.goodsModelList = selectedGoods.goodsModelList
                this.$set(row, 'goodsName', selectedGoods.goodsName)
                this.$set(row, 'thumbUrl', selectedGoods.thumbUrl)
                this.onModelSelectChange(selectedGoods.goodsModelList[0].id, row)
                row.goodsModel = ''
            }else{
                // 清空选项时
                this.$set(row, 'goodsId', '');
                row.goodsId = '';
            }
        },
        onSelectGoods(goods) {
            this.dialogVisible = false;
            goods.goodsModelList = goods.goodsModelList.map(item =>{
                item['modelId'] = item.id;
                return item;
            })
            let orderItem = {
                goodsName: goods.goodsName,
                goodsModelList: goods.goodsModelList,
                goodsId: goods.goodsModelList && goods.goodsModelList[0] ? goods.goodsModelList[0].modelId : '',
                buyPrice: goods.goodsModelList[0].modelPrice,
                goodsList: [],
                goodsNum: this.goodsNum,
                remarks: '',
                thumbUrl: goods.thumbUrl,
                salesGoodsType: this.type
            };
            // 重新设置goodsNum
            this.goodsNum = 1;
            this.goodsTable[this.selectedRowIndex] = orderItem;
            this.$set(this.goodsTable, this.selectedRowIndex, orderItem);
            this.countPrice();
        },
    }
}

function getPrice(modelId, data) {
  let price = 0;
  data.map(item => {
    if(item.modelId === modelId) return price = item.modelPrice;
  })
  return price;
}
</script>